<template>
	<view class="booking-orders-submit">
		<view class="booking-orders-submit-card">
			<view class="booking-orders-submit-card-title">
				<text>当前订单信息</text>
			</view>
			<view class="booking-orders-submit-card-content">
				<view class="booking-orders-submit-card-content-text">
					<image
						src="https://cdn3.axureshop.com/demo/1509778/images/%E9%A2%84%E7%BA%A6%E8%AE%A2%E5%8D%95%E6%8F%90%E4%BA%A4/u1266.svg">
					</image>
					<text>卡卷名称：{{kn.cardName}}</text>
				</view>
				<view class="booking-orders-submit-card-content-text">
					<image
						src="https://cdn3.axureshop.com/demo/1509778/images/%E9%A2%84%E7%BA%A6%E8%AE%A2%E5%8D%95%E6%8F%90%E4%BA%A4/u1265.svg">
					</image>
					<text>可用门店：{{kn.useDian}}</text>
				</view>
				<view class="booking-orders-submit-card-content-text">
					<image
						src="https://cdn3.axureshop.com/demo/1509778/images/%E9%A2%84%E7%BA%A6%E8%AE%A2%E5%8D%95%E6%8F%90%E4%BA%A4/u1265.svg">
					</image>
					<text>可用范围：{{kn.useWei}}</text>
				</view>
				<view class="booking-orders-submit-card-content-text">
					<image
						src="https://cdn3.axureshop.com/demo/1509778/images/%E9%A2%84%E7%BA%A6%E8%AE%A2%E5%8D%95%E6%8F%90%E4%BA%A4/u1265.svg">
					</image>
					<text>有效时间：{{kn.useTime}} ~ {{kn.useEndTime}}</text>
				</view>
				<view class="booking-orders-submit-card-content-text">
					<image
						src="https://cdn3.axureshop.com/demo/1509778/images/%E9%A2%84%E7%BA%A6%E8%AE%A2%E5%8D%95%E6%8F%90%E4%BA%A4/u1270.svg">
					</image>
					<text>下单时间：{{kn.dangTime}} ({{kn.day}})</text>
				</view>
			</view>
		</view>
		<view class="submitBtn">
			<button @click="sureBooking">
				<image
					src="https://cdn3.axureshop.com/demo/1509778/images/%E9%A2%84%E7%BA%A6%E8%AE%A2%E5%8D%95%E6%8F%90%E4%BA%A4/u1269.svg">
				</image>
				<text>确认支付（{{kn.price}}元）</text>
			</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		computed,
		reactive
	} from 'vue'
	import store from '@/store/index.js'
	import http from '../../utils/http';	
	//
	let kn = reactive({
		id: null,
		cardName: '1',
		useDian: '',
		useWei: '',
		useTime: '',
		useEndTime: '',
		dangTime: '',
		day: '',
		price: '',
	})
	let user_Id = ref(0)
	// 用户id
	let getUserId = function(){
		uni.getStorage({
			key: 'userId',
			success: function(res) {
				user_Id.value = res.data
				// sureBooking()
			},
			fail() {
				return 
			}
		})
	}
	//确认支付
	let sureBooking = () => {
		uni.showLoading({
			title: '支付成功'
		});
		setTimeout(function() {
			uni.hideLoading();
		}, 2000);
		console.log('77777',user_Id.value)
		http({
			url: '/buy/add',
			method: 'post',
			params: {
				userId: user_Id.value,
				couponId: kn.id,
				price: Number(kn.price),
				buyTime: new Date().toLocaleDateString()
			}
		}).then((res) => {
			console.log(res)
			if (res.msg == 'success') {
				uni.redirectTo({
					url: '/pages/CardMarket/CardMarket'
				})
				uni.showLoading({
					title: '购买成功!'
				});
				setTimeout(function() {
					uni.hideLoading();
				}, 2000);
			}else{
				wx.showToast({
					title: '购买失败!!',
					icon: 'error',
					duration: 1000, //持续的时间,
				})
			}
		})
	}
	let cuand = null
	let firstShow = onMounted(() => {
		getUserId()
		cuand = JSON.parse(JSON.stringify(store.state.mysl))
		console.log('kn.id',cuand.id);
		kn.id = cuand.id
		kn.cardName = cuand.name;
		kn.useDian = cuand.area.remark;
		kn.useWei = cuand.area.name;
		kn.useTime = cuand.createTime;
		kn.useEndTime = cuand.expireTime;
		kn.dangTime = new Date().toLocaleString();
		kn.price = cuand.price
		kn.day = new Array(
			"星期日",
			"星期一",
			"星期二",
			"星期三",
			"星期四",
			"星期五",
			"星期六"
		)[new Date().getDay()]
		kn = JSON.parse(JSON.stringify(kn))


	})

</script>

<style scoped lang="less">
	@import url('../../static/fonts/iconfont.css');

	.booking-orders-submit {

		& .booking-orders-submit-card {
			width: 670rpx;
			height: 500rpx;
			// outline: 1rpx solid red;
			margin: 30rpx 40rpx;
			box-shadow: 0 0 10rpx #ccc;
			background: #f7efe5;
			border-radius: 10rpx;
			box-sizing: border-box;

			& .booking-orders-submit-card-title {
				width: 670rpx;
				height: 100rpx;
				line-height: 100rpx;
				padding-left: 30rpx;
				box-sizing: border-box;
				color: #555555;
				font-weight: bold;
				border-bottom: 4rpx solid #e7d2b4;
			}

			& .booking-orders-submit-card-content {
				width: 670rpx;
				height: 400rpx;
				color: #555555;

				& .booking-orders-submit-card-content-text {
					padding: 10rpx 30rpx;
					line-height: 50rpx;

					& image {
						width: 30rpx;
						height: 30rpx;
						vertical-align: middle;
					}

					& text {
						margin-left: 16rpx;
						font-size: 26rpx;
						color: #7f7f7f;
						// outline: 1rpx solid red;
					}

					& button {
						display: inline-block;
						height: 46rpx;
						vertical-align: middle;
						line-height: 46rpx;
						background: #c6964f;
						border-radius: 50rpx;
						color: #ffffff;
						font-size: 30rpx;
					}
				}
			}

		}

		& .submitBtn {
			width: 670rpx;
			height: 100rpx;
			margin: 40rpx;

			& button {
				width: 100%;
				height: 100%;
				background: #c6964f;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				border: none;

				& image {
					display: block;
					width: 30rpx;
					height: 40rpx;
					margin-right: 10rpx;
				}

				& text {
					display: block;
				}

			}


		}
	}
</style>
